<template>
	<view class="container">
		<view class="top_wrap bc_fff">
			<view class="fx aic jcb">
				<image src="@/static/images/logo.png" mode="aspectFit"></image>
				<view class="right_box fr">
					<view class="title">
						变色龙认购清单
					</view>
					<view class="num">
						订单号：{{ dataInfo.orderNo || '' }}
					</view>
				</view>
			</view>
			<view class="info_wrap fx">
				<view class="fx_1">
					<view class="fx flex_row">
						<view class="fx_1">
							收货人：
						</view>
						<view class="fx_3">
							{{ dataInfo.realName || '' }}
						</view>
					</view>
					<view class="fx flex_row">
						<view class="fx_1">
							手机号：
						</view>
						<view class="fx_3">
							{{ dataInfo.userPhone || '' }}
						</view>
					</view>
					<view class="fx flex_row">
						<view class="fx_1">
							地址：
						</view>
						<view class="fx_3">
							{{ dataInfo.userAddress || '' }}
						</view>
					</view>
				</view>
				<view class="fx_1">
					<view class="fx flex_row">
						<view class="fx_1">
							下单时间：
						</view>
						<view class="fx_3">
							{{ dataInfo.createOrderTime || '' }}
						</view>
					</view>
					<view class="fx flex_row">
						<view class="fx_1">
							支付方式：
						</view>
						<view class="fx_3">
							-
						</view>
					</view>
					<view class="fx flex_row">
						<view class="fx_1">
							期望发货时间：
						</view>
						<view class="fx_3">
							{{ dataInfo.expectedReceiveTime || '' }}
						</view>
					</view>
				</view>
			</view>
			<view class="fx aic jcb fb total">
				本次订单包含{{ dataInfo.productCount || 0 }}件商品，信息如下：
				<view>
					进货单总金额<text class="fc_primary">￥{{ dataInfo.totalPrice || 0 }}</text>
				</view>
			</view>
		</view>
		<view class="table_wrap fl">
			<view class="thead">
				<view class="th">
					<tTable border="0">
						<tTr>
							<tTh align="left">商品图片</tTh>
							<tTh align="left">商品名称</tTh>
							<tTh>规格</tTh>
							<tTh>进货价</tTh>
							<tTh>数量</tTh>
							<tTh>金额</tTh>
						</tTr>

						<template v-for="(item, index) in dataInfo.orderBrandInfoList">
							<tTr :key="index">
								<tTd>
									<view class="fx aic store_name w100">
										<image class="icon" src="@/static/images/shop.png" mode=""></image>
										<view class="name">
											{{ item.brandName || '' }}
										</view>
									</view>
								</tTd>
							</tTr>
							<template v-for="(item1, index1) in item.productInfoList">
								<tTr :key="index1">
									<tTd align="left">
										<image :src="item1.image" mode="aspectFit"></image>
									</tTd>
									<tTd align="left">{{ item1.productName || '' }}
									</tTd>
									<tTd>{{ productRuleStr(item1.productRule) }}
									</tTd>
									<tTd>￥{{ item1.purchasingPrice }}
									</tTd>
									<tTd>{{ item1.payNum || 0 }}
									</tTd>
									<tTd>
										<view class="fc_primary">
											￥{{ itemTotalPrice(item1) }}
										</view>
									</tTd>
								</tTr>
								<tTr :key="index1">
									<tTd align="left">
										<view class="fb tips">
											购买留言:{{ item1.mark || '' }}
										</view>
									</tTd>
								</tTr>
							</template>
						</template>
					</tTable>
				</view>
			</view>
		</view>
		<view class="fr bottom_wrap">
			<view class="fx flex_row">
				<view class="fx_5">
					商品总金额：
				</view>
				<view class="fx_1">
					¥ {{ dataInfo.totalPrice || 0 }}
				</view>
			</view>
			<view class="fx flex_row" v-if="dataInfo.couponPrice">
				<view class="fx_5">
					优惠券：
				</view>
				<view class="fx_1">
					-¥ {{ dataInfo.couponPrice || 0 }}
				</view>
			</view>
			<view class="fx flex_row" v-if="dataInfo.salesDiscount">
				<view class="fx_5">
					平台优惠：
				</view>
				<view class="fx_1">
					-¥ {{ dataInfo.salesDiscount || 0 }}
				</view>
			</view>
			<view class="fx flex_row" v-if="dataInfo.youjiaDiscount">
				<view class="fx_5">
					金豆抵扣：
				</view>
				<view class="fx_1">
					-¥ {{ dataInfo.youjiaDiscount || 0 }}
				</view>
			</view>
			<view class="fx flex_row">
				<view class="fx_5">
					运费合计：
				</view>
				<view class="fx_1">
					￥{{ dataInfo.deliveryCost || 0 }}
				</view>
			</view>
			<view class="fx flex_row"
				v-if="dataInfo.deliveryWay==2&&dataInfo.logisticsDelivery==1&&dataInfo.isInstall">
				<view class="fx_5">
					安装费合计：
				</view>
				<view class="fx_1">
					￥{{dataInfo.installCost||0}}
				</view>
			</view>
			<view class="fx flex_row"
				v-if="dataInfo.deliveryWay == 2 && dataInfo.logisticsDelivery == 1 && dataInfo.villageType == 2">
				<view class="fx_5">上楼费合计：</view>
				<view class="fx_1">￥{{ dataInfo.upstairsCost || 0 }}</view>
			</view>
			<view class="fx fb total flex_row">
				<view class="fx_5">
					订单总金额：
				</view>
				<view class="fx_1 fc_primary">
					￥{{ dataInfo.payAmount || 0 }}
				</view>
			</view>
		</view>
		<view class="btn_wrap">
			<button class="custom_btn primary w100" @click="handleSave">保存图片</button>
		</view>
	</view>
</template>

<script>
	import tTable from '../components/t-table/t-table.vue';
	import tTh from '../components/t-table/t-th.vue';
	import tTr from '../components/t-table/t-tr.vue';
	import tTd from '../components/t-table/t-td.vue';
	import api from '@/service/config/api.js'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				dataInfo: {},
				id: '',
			}
		},
		computed: {
			...mapState(['subcribeImg']), // 获取整个对象
			productRuleStr() {
				return (data) => {
					return data ?
						JSON.parse(data)
						.map((item1) => item1.value)
						.join(' ') :
						''
				}
			},
			itemTotalPrice() {
				return (item) => this.$utils.floatMul(item.purchasingPrice, item.payNum)
			},
		},
		watch: {
			subcribeImg: {
				deep: true, //深度监听设置为 true
				handler: function(newVal, oldVal) {
					console.log("数据发生变化啦"); //修改数据时，能看到输出结果
					console.log(newVal, oldVal);
					if (newVal) {
						this.base64ImageHandle(newVal)
					}
				}
			}
		},
		onLoad(options) {
			if (!options.id) {
				return this.$utils.showToast('订单有误', 1500, 1)
			}
			this.id = options.id
			this.$utils.loading()
			api.get(`/order/api/order/shoppingList/${options.id}`).then(res => {
				this.dataInfo = res.data;
			})
		},
		onUnload() {
			this.$store.commit('setSubcribeImg', '')
		},
		methods: {
			handleSave() {
				uni.navigateTo({
					url: '/pages/person/pages/subscribe-temp?id=' + this.id
				})
			},
			/** base64图片保存 */

			base64ImageHandle(base64) {
				// 指定图片的临时路径

				const path = `${wx.env.USER_DATA_PATH}/image.png`

				// 获取小程序的文件系统

				const fsm = uni.getFileSystemManager()

				// 把arraybuffer数据写入到临时目录中

				fsm.writeFile({
					filePath: path,

					data: base64.replace(/^data:image\/\w+;base64,/, ''),

					encoding: 'base64',

					success: () => {
						uni.showModal({
							title: '保存图片',

							content: '保存图片到手机相册？',

							confirmColor: '#be3a34',

							success: (result) => {
								if (result.confirm) {
									// 把临时路径下的图片，保存至相册

									uni.saveImageToPhotosAlbum({
										filePath: path,

										success: () => {
											this.$utils.showToast('保存成功', 1500, 1, '',
												'success')
										},
									})
								} else {
									this.$utils.navigateBack()
								}
							},
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.subscribe_container {
		padding-left: calc(var(--status-bar-height) + 10px);
	}

	$layoutPixel: 2;

	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * $layoutPixel * 100 / 750}vmin;
	}

	.container {
		font-size: tovmin(12);
		padding-left: calc(var(--status-bar-height) + 10px);
		padding-bottom: calc(10px + constant(safe-area-inset-bottom));
		padding-bottom: calc(10px + env(safe-area-inset-bottom));

		.top_wrap {
			padding: tovmin(16);

			image {
				width: tovmin(64);
				height: tovmin(48);
				border-radius: tovmin(4);
			}

			.right_box {

				.title {
					margin-top: tovmin(6);
				}

				.num {
					margin-top: tovmin(8);
				}
			}

			.info_wrap {
				margin-top: tovmin(20);

				.flex_row {
					padding: tovmin(4) 0;
				}
			}

			.total {
				margin-top: tovmin(20);
			}
		}

		.table_wrap {
			font-size: tovmin(14);

			/deep/.t-th,
			/deep/.t-td {
				font-size: tovmin(14);
				padding: tovmin(6) tovmin(12);
				text-align: left;
			}

			/deep/.t-th {
				background: #F1F3F5;
			}

			/deep/.t-td {
				background: #F9F9F9;
			}

			/deep/.u-icon text {
				font-size: tovmin(16) !important;
			}

			.name {
				margin-left: tovmin(4);
			}

			image {
				width: tovmin(90);
				height: tovmin(90);
				border-radius: tovmin(4);
			}

			.icon {
				width: tovmin(16);
				height: tovmin(16);
				border-radius: 0;
			}

			.tips {
				font-size: tovmin(12);
			}
		}

		.bottom_wrap {
			padding: tovmin(20) tovmin(40);

			.total {
				font-size: tovmin(14);
			}

			.flex_row {
				padding: tovmin(4) 0;
			}
		}

		.btn_wrap {
			margin: 0 tovmin(16);

			button {
				line-height: tovmin(40);
				border-radius: tovmin(27);
				font-size: tovmin(14)
			}
		}
	}
</style>